<template>
  <div class="content">
    <h2>message: {{message}}</h2>
    <button @click="message = '你好啊'">修改message数据</button>
    <h2>info: {{info}}</h2>
    <button @click="info.friend.name = 'james'">修改info数据</button> <!--默认进行深度侦听-->
  </div>
</template>

<script>
  import { ref, watch, reactive } from "vue"
  export default {
    setup() {
      const message = ref("Hello World")
      const info = reactive({
        name: "why",
        age: 18,
        friend: {
          name: "kobe"
        }
      })
      
      watch(message, (newValue, oldValue) =>{ 
          console.log('message:新数据: ', newValue, '   旧数据: ',oldValue) // newValue和oldValue是同一个对象,默认是proxy对象
          console.log('message:',oldValue === newValue) // false
        },{
          immediate: true // 立即执行, 默认是true
        }
      )
      
      // 监听数据变化, 返回的是代理对象proxy
      // watch(info, (newValue, oldValue) =>{
      //   console.log('info:新数据: ', newValue, '   旧数据: ',oldValue)
      //   console.log('info:',oldValue === newValue) // true
      // })

      // 侦听reactive数据变化后,获取普通对象,而不是proxy对象
      watch(() => ({...info}), (newValue, oldValue) => { // 这里加()是因为要返回一个对象,不加()会报错
          console.log('非proxy对象info:新数据: ', newValue, '   旧数据: ',oldValue) // newValue和oldValue是同一个对象,默认是proxy对象
        },{
          immediate: true, // 立即执行, 默认是true
          deep: true // 默认不是深度侦听,需要手动开启
        }
      )

      // const obj = new Proxy({}, {})
      // {...obj}

      return {
        message,
        info
      }
    }
  }
</script>

<style scoped>
</style>